<template>   
<div style="height:100%;">
    <scroller style="height:100%;" lock-x scrollbar-y use-pulldown use-pullup :pullup-config="pullupConfig2" @on-pulldown-loading="reload" @on-pullup-loading="loadmore" ref="listref" v-model="listStatus">
      <!--content slot-->
      <div class="box2 list">
        <ul>
            <li class="a" v-for="sc in datalist" :class="sc.toptime>0?'istop':''" v-on:click="$router.push('/detail/'+ sc.id +'.html')">
                <div class="user">
                    <img :src="sc.headimgurl">
                    {{sc.saddr}} <x-icon type="arrow-right-c" style="fill:#999;" size="12"></x-icon> {{sc.eaddr}}
                    <div class="type" v-if="sc.type==='1'">车主</div>
                    <div class="type type2" v-if="sc.type==='2'">乘客</div>
                </div>
                <div class="y time">出发时间：{{sc.stime}}<em>{{sc.pubtime}}发布</em></div>
                <div class="y re">其它说明：{{sc.other}}</div>
            </li>
        </ul>
      </div>
  
      <!--pulldown slot-->
      <div slot="pulldown" class="xs-plugin-pulldown-container xs-plugin-pulldown-down" style="position: absolute; width: 100%; height: 60px; line-height: 60px; top: -60px; text-align: center;">
        <span v-show="listStatus.pulldownStatus === 'default'"></span>
        <span class="pulldown-arrow" v-show="listStatus.pulldownStatus === 'down' || listStatus.pulldownStatus === 'up'" :class="{'rotate': listStatus.pulldownStatus === 'up'}">↓</span>
        <span v-show="listStatus.pulldownStatus === 'loading'"><spinner type="ios-small"></spinner></span>
      </div>
      <!--pullup slot-->
      <div slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 40px; bottom: -40; text-align: center;">
        <span v-show="listStatus.pullupStatus === 'disabled'">到底了</span>
        <span class="pullup-arrow" v-show="listStatus.pullupStatus === 'default' || listStatus.pullupStatus === 'up' || listStatus.pullupStatus === 'down'" :class="{'rotate': listStatus.pullupStatus === 'down'}">上拉加载更多</span>
        <span v-show="listStatus.pullupStatus === 'loading'"><spinner type="ios-small"></spinner></span>
      </div>
    </scroller>
</div>
</template>

<script>
import { Scroller, Spinner } from 'vux'
export default {
  components: {
    Scroller,
    Spinner
  },
  props: ['datalist','loading','morepage'],
  data () {
    return {
      n1: 10,
      listStatus: {
        pulldownStatus: 'default',
        pullupStatus: 'default'
      },
      pullupConfig2: {
        content: '上拉加载更多',
        downContent: '松开进行加载',
        upContent: '上拉加载更多',
        loadingContent: '加载中...'
      }
    }
  },  
  watch:{
    loading: function(val){ //暂时没有用
      if(val==false){
      }
    },
    datalist: function(dnew, dold){
      if(dnew!=undefined && dold!=undefined && dnew.length<=dold.length){
        this.listStatus.pulldownStatus='default';
        this.$nextTick(() => {
          this.$refs.listref.reset({
            top: 0
          })
        })
      }
      if(this.listStatus.pullupStatus!='disabled'){
        this.listStatus.pullupStatus='default';
      }          
    },
    morepage: function(dnew){
      this.$nextTick(() => {
        if(dnew == false){
          this.$refs.listref.disablePullup();
        }else if(dnew == true && this.listStatus.pullupStatus=='disabled'){
          this.$refs.listref.enablePullup();
        }        
      })
      console.log('watch morepage' + this.listStatus.pullupStatus)
    }
  },
  methods: {
    reload () {
      this.$emit('reload')
    },
    loadmore () {
      this.$emit('loadmore')
    },
  },
}
</script>

<style lang="less" scoped>
.box1 {
  height: 100px;
  position: relative;
  width: 1490px;
}
.box1-item {
  width: 200px;
  height: 100px;
  background-color: #ccc;
  display:inline-block;
  margin-left: 15px;
  float: left;
  text-align: center;
  line-height: 100px;
}
.box1-item:first-child {
  margin-left: 0;
}
.box2{
  height:100%;
}
.box2-wrap {
  height: 300px;
  overflow: hidden;
}
.rotate {
  transform: rotate(-180deg);
}
.pulldown-arrow {
  display: inline-block;
  transition: all linear 0.2s;
  color: #666;
  font-size: 25px;
}
.focus img { width: 100%; }
.list { padding: 5px;font-size:14px;color:#666 }
.list .a.istop:after{content:"置顶";font-size:12px;background:#e33737;color:#fff;padding:1px;position:absolute;width:60px;text-align:center;-webkit-transform:rotateZ(-45deg);left:-16px;top:6px;display:inline-block;height:16px;line-height:16px}
.list .a { background: #fff; border-radius: 2px; display:block;padding:10px;position:relative;margin-bottom:5px;position:relative;overflow:hidden}
.list .user {border-bottom:1px solid #f7f7f7;height:40px;line-height:40px;position:relative;padding-left:50px;font-size:16px;color:#333 ;margin-bottom:2px}
.list .user img { height: 30px; width: 30px; border-radius: 50%; position: absolute; top: 5px; left: 5px;  }
.list .user i { color: #75d9ff;font-size:20px;vertical-align:middle;margin-left:5px }
.list .user .girl { color: #ff9ce5; }
.list .y { position: relative; padding-left:15px;/*height:30px;*/line-height:30px;font-size:13px}
.list .y:before {content:"●";font-size:13px;color:#5084ff;position:absolute;left:0px;top:-1px}
.list .y:nth-child(2n):before { color: #5ad107; }
.list .tel { position: absolute; right: 10px; top: 70px; background: #e72b2a; font-size: 30px; color: #fff; width:40px;height:40px;line-height:40px;text-align:center; border-radius: 50%; }
.list .time em {font-size:8px;  position: absolute; right: 0px; color: #c0c0c0; text-align:right;display:inline-block;width:100px}
.list .time .em2 { color: #75d9ff; }
.type { color: #fff; font-size: 12px; position: absolute; right: 0px; top: 10px; background: #0e90d2; border-radius: 2px; height:16px;line-height:16px;padding:4px 5px}
.type2 { background: #5eb95e; }
.list .re { position: relative; }
.list .re em { position: absolute; right: 0px; color: #e33737; text-align:center;display:inline-block;width:40px}
.from { }
.from em { color: #666; }
.from em:first-child { padding-right: 6px; }
.from em:last-child { padding-left: 6px; }
.from i { border: 6px solid transparent; border-left: 6px solid #e4e4e4; width:0px; height: 0px; display:inline-block;vertical-align:middle;margin-left:4px}
.remark { border-top: 1px solid #f7f7f7; margin-top: 2px; color: #999; line-height: 1.6em;padding:5px 0 }
.tools { background: #fff; border-radius: 2px;padding:5px 5px 6px 5px;position:relative;margin:5px 5px 0 5px }
.tools .se { width: 100%; color:#999}
.tools .se input { border: 0; border-bottom: 1px solid #f5f5f5; width: 70px;text-align:center;padding:4px 0 }
.tools .se a { color: #fff;background:#e33737;border-radius:2px;font-size:12px;height:26px;line-height:26px;display:inline-block;padding:0 5px; }
.tools .sort { position: absolute; top: 5px; right: 5px; }
.tools .sort a { border-radius:0 3px 3px 0; border: 1px solid #f5f5f5;border-left:0px; height:26px;line-height:26px;padding:0 5px; font-size:12px;color:#ccc;margin:0px;float:left}
.tools .sort .sel { background: #8a8685; color: #fff;border-color:#8a8685 }
.tools .sort a:first-child { border-radius: 3px 0 0 3px; }

.mlink { position: fixed; right: 5px; bottom:55px;background:rgba(0,0,0,0.6); display: block; width: 34px; height: 34px; line-height:34px; text-align: center; font-size: 12px; color: #fff!important; border: 1px solid #e5e5e5; border-radius: 50%; -moz-box-shadow:0 0 10px #e5e5e5;-webkit-box-shadow:0 0 10px #e5e5e5;  box-shadow:0 0 10px #e5e5e5;  }

</style>